<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <uni-nav-bar title="员工管理" :border="false"></uni-nav-bar>

        <!-- 搜索栏 -->
        <view class="search-box">
            <uni-search-bar placeholder="输入姓名或电话搜索" @confirm="handleSearch" v-model="searchKeyword"></uni-search-bar>
        </view>

    <!-- 员工列表 -->
    <uni-list>
      <uni-list-item 
        v-for="(employee, index) in employees" 
        :key="employee.id"
        :title="employee.name" 
        :note="`地址：${employee.address} | 职位：${employee.position}`"
        clickable
        @click="handleEdit(employee)"
      >
        <!-- 右侧内容 -->
        <template v-slot:footer>
          <view class="list-right">
            <text class="phone">{{ employee.number }}</text>
            <uni-icons 
              type="trash" 
              size="20" 
              color="#dd524d" 
              @click.stop="handleDelete(employee.id)"
            ></uni-icons>
          </view>
        </template>
      </uni-list-item>
    </uni-list>

    <!-- 添加按钮 -->
    <view class="add-btn" @click="attyg">
      <uni-icons type="plusempty" size="30" color="#fff"></uni-icons>
    </view>

    <!-- 添加/编辑弹窗 -->
    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog 
        :type="dialogType" 
        :title="dialogTitle"
        mode="input"
        :value="formData"
        @confirm="handleConfirm"
      >
        <uni-forms ref="form" :model="formData" :rules="rules">
          <uni-forms-item label="姓名" name="name">
            <uni-easyinput v-model="formData.name" placeholder="请输入姓名" />
          </uni-forms-item>
          <uni-forms-item label="地址" name="address">
            <uni-easyinput v-model="formData.address" placeholder="请输入地址" />
          </uni-forms-item>
          <uni-forms-item label="职位" name="position">
            <uni-easyinput v-model="formData.position" placeholder="请输入职位" />
          </uni-forms-item>
          <uni-forms-item label="电话" name="number">
            <uni-easyinput v-model="formData.number" placeholder="请输入电话" />
          </uni-forms-item>
        </uni-forms>
      </uni-popup-dialog>
    </uni-popup>
	
	
  </view>
</template>

<script>
	import {
		Get_employ
	} from "@/pages/apis/login.js"
export default {
  data() {
    return {
      employees: [],
      searchKeyword: '',
	  total:0,
      dialogType: 'add', // add/edit
      formData: {
        id: null,
        name: '',
        department: '',
        position: '',
        phone: ''
      },
      rules: {
        name: {
          rules: [{ required: true, errorMessage: '姓名不能为空' }]
        },
        department: {
          rules: [{ required: true, errorMessage: '部门不能为空' }]
        },
        phone: {
          rules: [
            { required: true, errorMessage: '电话不能为空' },
            { pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号码格式不正确' }
          ]
        }
      }
    }
  },
  computed: {
    filteredEmployees() {
      return this.employees.filter(emp => {
        return emp.name.includes(this.searchKeyword) || 
               emp.phone.includes(this.searchKeyword)
      })
    },
    dialogTitle() {
      return this.dialogType === 'add' ? '新增员工' : '编辑员工'
    }
  },
  methods: {
	  async bind(){
		  const res = await Get_employ({
			key:this.searchKeyword,
			page:1,
			limit:10
		  });
		  if(res.code===0){
		  	this.employees=res.data.data;
			this.total=res.data.total;
		  }
	  },
    handleSearch() {
      // 搜索逻辑已在计算属性处理
    },
	attyg(){
	    uni.navigateTo({
	    	url: '/pages/employee/abbyg'
	    })
	  },
    handleAdd() {
      this.dialogType = 'add'
      this.formData = {
        id: null,
        name: '',
        department: '',
        position: '',
        phone: ''
      }
      this.$refs.popup.open()
    },
    handleEdit(employee) {
      this.dialogType = 'edit'
      this.formData = { ...employee }
      this.$refs.popup.open()
    },
    handleDelete(id) {
      uni.showModal({
        title: '提示',
        content: '确定要删除该员工吗？',
        success: res => {
          if (res.confirm) {
            this.employees = this.employees.filter(emp => emp.id !== id)
            uni.showToast({ title: '删除成功' })
          }
        }
      })
    },
    async handleConfirm() {
      try {
        await this.$refs.form.validate()
        
        if (this.dialogType === 'add') {
          this.formData.id = Date.now()
          this.employees.push(this.formData)
        } else {
          const index = this.employees.findIndex(emp => emp.id === this.formData.id)
          this.employees.splice(index, 1, this.formData)
        }
        
        this.$refs.popup.close()
        uni.showToast({ title: '操作成功' })
      } catch (e) {
        console.log('验证失败:', e)
      }
    }
  },
  onLoad(){
  	this.bind();
  }
}
</script>

<style scoped>
    .container {
        padding-bottom: 100rpx;
    }

    .search-box {
        padding: 20rpx;
        background-color: #f8f8f8;
    }

    .list-right {
        display: flex;
        align-items: center;
        gap: 20rpx;
    }

    .phone {
        color: #666;
        font-size: 24rpx;
    }

    .add-btn {
        position: fixed;
        right: 40rpx;
        bottom: 100rpx;
        width: 100rpx;
        height: 100rpx;
        background-color: #007AFF;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.4);
    }
</style>